<template>
    <tip-list title="项目基本情况":class="{headclass:headclassBol}">
        <div class="public-form inner-container">
            <div class="clearfix search-header">
                <ul class="input list clearfix">
                    <li>
                        <my-tooltip text="项目名称"></my-tooltip>
                        <div class="box">
                            <el-input v-model="searchFrom.keyword" placeholder="请输入项目名称"></el-input>
                        </div>
                    </li>
                    <div style="height:65px;padding:5px 0px 0px 0px;float:left">
                    <el-button @click="reset"  style="float:right;width:120px">重置</el-button>
                    <el-button type="primary" @click="queryList()" style="float:right;margin-right:20px;width:120px">查询</el-button>
                 </div>
                </ul>
            </div>
            <el-table  :data="tableData" style="width: 100%" :height="tableHeight">
                <el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="项目名称" width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="buildArea" label="有条件建设区面积" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="hookArea" label="增减挂钩指标面积" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="yearArea" label="年度指标面积" width="150" show-overflow-tooltip>
                </el-table-column>
                 <el-table-column prop="approvalArea" label="取得用地批文面积" width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="approvalNum" label="批文号" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="cardArea" label="土地证面积" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="landNature" label="用地性质" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="landNum" label="土地证证号"  width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="landLife" label="用地年限" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="extent" label="宗地四至描述"  width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template scope="row">
                        <el-button @click="edit(row)" type="text" size="small">
                        	编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page" v-show="total">
                <el-pagination
                 :current-page="searchFrom.current"
                 :page-size="searchFrom.size"
                 @size-change="handleSizeChange"
                 @current-change="pageChange"
                 layout="total,prev, pager, next,jumper"
                 :total="total">
                </el-pagination>
            </div>
             <landuse-edit v-if="showEdit" :showDialogId="showDialogId" :showDialog.sync="showEdit"></landuse-edit>
        </div>
    </tip-list>
</template>
<script>
import tipList from '../../public/TidiList'
import landuseEdit from  '../Project/projectlanduseDialog/LandUseEdit.vue'

export default {
    components: {
      tipList,
      landuseEdit
   },
     created() {
        this.queryList()
        this.eventBus.$on('streetUpdate', () => {
            this.queryList(true)
        })
        this.eventBus.$on('streetAdd', () => {
            this.queryList(true)
        })
    },
    mounted() {
      setTimeout(()=>{
            this.headclassBol=true;
        },500)
         //分辨率宽度大于等于1920table高度自适应
      if ($(window).width() >= 1920) {
            //得到初始高度
            let contentHeight = $('.content').height(),
                wrapListHeight = $('.view-box-header').height(),
                warpBoxHigeht = $('.list').height(),
                typeBoxHigeht = $('.typeClass').height(),
                pageHigeht = $('.page').height();
            this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - typeBoxHigeht - pageHigeht - 120
            console.log(wrapListHeight, warpBoxHigeht, contentHeight, pageHigeht, typeBoxHigeht, this.tableHeight)
                //计算显示高度
            var timer = null;
            $(window).resize(() => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    let contentHeight = $('.content').height(),
                        wrapListHeight = $('.view-box-header').height(),
                        warpBoxHigeht = $('.list').height(),
                        typeBoxHigeht = $('.typeClass').height(),
                        pageHigeht = $('.page').height();
                    this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - warpBoxHigeht - pageHigeht - 120
                }, 200)
            })
        } else {
            this.tableHeight = "";
        }
    },
    destroyed() {
        //移除监听
        $(window).unbind()
    },
     data() {
        return {
            headclassBol:false,
            searchFrom: {
                current: 1, //页码
                size: 15, //每页条数
                keyword: '', //名称
            },
            total: 0, //总条数
            tableHeight: '', //table高度
            tableData: [],
            showdetail: false, //显示dialog状态
            showEdit:false,
            showDialogId: '', //显示对于dialogID
        }
    },
     methods: {
        queryList(type) {
            /*如果是点击查询，页码初始化为1*/
            if (type && this.searchFrom.current != 1) {
                this.searchFrom.current = 1
                return false
            }
            this.ajax({
                url: 'tProjectLand/selectProjectLandPage',
                data: this.searchFrom
            }).then(data => {
                this.total = data.total
                this.tableData = data.records
            })
        },
       /*查看详情*/
        particular(data) {
            /*当前选择的数据id*/
            this.showDialogId = data.row.id
                /*显示dialog*/
            this.showdetail = true
        },
        /*编辑*/
        edit(data) {
            /*当前选择的数据id*/
            this.showDialogId = data.row.id
                /*显示dialog*/
            this.showEdit = true
        },
        pageChange(val) {
            this.searchFrom.current = val
            this.queryList()
        },
        //输入页码跳转
        handleSizeChange(){
            this.searchFrom.current = val
            this.queryList()
        },
        reset() { //查询框重置
                this.searchFrom.keyword= '', //名称
                this.queryList();
        }
    }
}
</script>
<style lang="less" scoped>
.headclass{
    width:99%;
}
.public-form {
    .search-header {
        position: relative;
        .search-btn {
            position: absolute;
            top: 4px;
            right: 0;
        }
    }
    ul.input {
        float: left;
        // padding-right: 200px;
        // margin-left:-25px;
        width: 100%;
        li {
            float: left;
            width: 25%;
            padding: 5px 0 5px 20px;
            margin-bottom: 5px;
            span {
                float: left;
                width: 80px;
                line-height: 36px;
                display: block;
                text-indent: 5px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .box {
                width: 100%;
                padding-left: 160px;
            }
        }
    }
}
</style>
<style lang="less">
.public-form {
    .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
    .el-form-item__label {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
    .el-textarea__inner {
        height: 87px;
    }
    .el-date-editor.el-input {
        width: 100%;
    }
    .el-select {
        width: 100%;
    }
}
</style>